<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Phone Info Fetcher</title>
    <style>
        .title {
            margin-bottom: 20px;
        }
        .input-group {
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

<div class="input-group">
    <label for="phoneNum">请输入手机号：</label>
    <input type="text" id="phoneNum" placeholder="请输入11位手机号">
    <button onclick="fetchData()">查询</button>
</div>

<div class="title">
    <h3><span style="color: crimson;">运营商：</span><span id="operator" style="color: crimson;"></span></h3>
    <h3><span style="color: crimson;">省份：</span><span id="province" style="color: crimson;"></span></h3>
    <h3><span style="color: crimson;">市区：</span><span id="city" style="color: crimson;"></span></h3>
    <h3><span style="color: crimson;">市区编码：</span><span id="areacode" style="color: crimson;"></span></h3>
    <h3><span style="color: crimson;">地域编号：</span><span id="zipcode" style="color: crimson;"></span></h3>
</div>

<script>
    function fetchData() {
        const phoneNumInput = document.getElementById('phoneNum');
        const phoneNum = phoneNumInput.value;

        if (phoneNum.length !== 11) {
            alert('请输入11位手机号！');
            return;
        }

        fetch(`http://localhost:8082/getPhoneMessage?phoneNum=${phoneNum}`)
            .then(response => {
                if (!response.ok) {
                    throw new Error('网络请求失败');
                }
                return response.json();
            })
            .then(data => {
                if (data.code === "0") {
                    const info = data.data.info;
                    document.getElementById('operator').textContent = info.op;
                    document.getElementById('province').textContent = info.province;
                    document.getElementById('city').textContent = info.city;
                    document.getElementById('areacode').textContent = info.areacode;
                    document.getElementById('zipcode').textContent = info.zipcode;
                } else {
                    alert('获取数据失败：' + data.msg);
                }
            })
            .catch(error => {
                alert('请求失败：' + error.message);
            });
    }
</script>

</body>
</html>
